<template>
  <div>
    <Head title="优惠券信息" isBack>
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm1"
          :detail="data.detailData"
          :labelWidth="100"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="承担方设置">
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm2"
          :detail="data.detailData"
          :labelWidth="100"
          align="left"
        ></Detail>
      </template>
    </Head>
    <Head title="使用限制">
      <template #content>
        <Detail
          :columns="1"
          :form="detailForm3"
          :detail="data.detailData"
          :labelWidth="100"
          align="left"
        ></Detail>
      </template>
    </Head>
  </div>
</template>

<script lang="ts" setup>
import Head from '@/components/head/index.vue';
import Detail from '@/components/form/detail.vue';
import { getActivityById } from '@/service/apis/market';
import { queryDicByParent } from '@/service/apis/api';

const route = useRoute();
const {
  query: { id },
} = route;

queryDicByParent({
  listDtos: [
    'couponType',
    'couponDiscountType',
    'effectiveDateType',
    'stationTargetType',
  ],
}).then((res: any) => {
  if (res) {
    detailForm1[1].dic = res.couponType;
    detailForm3[0].dic = res.couponDiscountType;
    detailForm3[2].dic = res.effectiveDateType;
    detailForm3[4].dic = res.stationTargetType;
  }
});

const detailForm1: any = reactive([
  {
    label: '优惠券名称',
    prop: 'name',
  },
  {
    label: '优惠券类型',
    prop: 'couponType',
    dic: [] as any,
    type: Number,
  },
  {
    label: '优惠券数量',
    prop: 'couponCount',
  },
]);

const detailForm2: any = reactive([]);

const detailForm3: any = reactive([
  {
    label: '抵扣费用类型',
    prop: 'discountType',
    dic: [] as any,
    comName: 'radio',
    type: Number,
  },
  {
    label: '订单',
    prop: 'qualifiedAmount',
    template: (row: any, index: number) => {
      return `满${row.qualifiedAmount}元可用`;
    },
  },
  {
    label: '使用时间',
    prop: 'effectiveDateType',
    dic: [] as any,
    comName: 'radio',
    type: Number,
  },
  {
    label: '优惠券使用说明',
    prop: 'introduce',
    comName: 'textarea',
  },
  {
    label: '可用电站',
    prop: 'stationType',
    dic: [] as any,
    comName: 'radio',
    type: Number,
  },
]);

const data = reactive({
  detailData: {} as any,
});

getActivityById(id).then((res: any) => {
  console.log('res---', res);
  data.detailData = res;

  if (res.couponType === 0) {
    // 折扣券
    detailForm1.splice(2, 0, {
      label: '优惠券折扣',
      prop: 'discountRatio',
      unit: '%',
    });
    detailForm1.splice(3, 0, {
      label: '折扣抵扣上限',
      prop: 'discountLimit',
      unit: '元',
    });
  } else if (res.couponType === 1) {
    // 现金券
    detailForm1.splice(2, 0, {
      label: '优惠券面额',
      prop: 'discountAmount',
      unit: '元',
    });
  }

  // 承担方
  if (res.dutyList?.length > 0) {
    const arr = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
    res.dutyList.forEach((item: any, index: number) => {
      detailForm2.push({
        label: `承担方${arr[index]}`,
        prop: 'orgName',
        template: (row: any, index: number) => {
          return `${item.orgName} 承担比例 ${item.dutyRatio}%`;
        },
      });
    });
  }

  if (res.discountType === 0) {
    detailForm3[1].label = '订单总费用';
  } else if (res.discountType === 1) {
    detailForm3[1].label = '订单服务费';
  } else if (res.discountType === 2) {
    detailForm3[1].label = '订单电费';
  }

  if (res.effectiveDateType === 0) {
    //相对时间
    detailForm3.splice(3, 0, {
      label: '领取后',
      prop: 'effectiveDateLength',
      unit: '天',
    });
  } else if (res.effectiveDateType === 1) {
    //绝对时间
    detailForm3.splice(3, 0, {
      label: '使用期限',
      prop: 'effectiveStartDate',
      template: (row: any, index: number) => {
        return row.effectiveStartDate && row.effectiveEndDate
          ? `${row.effectiveStartDate}~${row.effectiveEndDate}`
          : '--';
      },
    });
  }
  // 电站树
  if (res.stationType != 0) {
    detailForm3.push({
      label: '',
      prop: 'stationTree',
      comName: 'tree',
      dic: res.stationTree,
    });
  }
});
</script>